<template>
  <div>
    <!-- 面包屑区域 -->
    <bread-cart></bread-cart>
    <div class="cart">
      <table>
        <thead>
          <tr>
            <th width="120" style="display: flex">
              <check-box :val.sync="flag" :title="'quan'" @click="One1">
              </check-box
              >全选
              {{ flag }}
            </th>
            <th width="400">商品信息</th>
            <th width="220">单价</th>
            <th width="180">数量</th>
            <th width="180">小计</th>
            <th width="140">操作</th>
          </tr>
        </thead>
        <!-- 有效商品 -->
        <tbody>
          <tr v-for="(item, key) in list" :key="key">
            <td class="cartqx">
              <check-box :val.sync="item.selected" :title="key"></check-box>
              {{ item.selected }}
            </td>
            <td>
              <div class="goods">
                <RouterLink to="/">
                  <img :src="item.picture" alt="" />
                </RouterLink>
                <div>
                  <p class="name ellipsis">
                    {{ item.name }}
                  </p>
                  <!-- 选择规格组件 -->
                </div>
              </div>
            </td>
            <td class="tc">
              <p>
                &yen;
                {{ item.nowPrice }}
              </p>
              <p>
                比加入时降价
                <span class="red"
                  >&yen;
                  {{ item.nowPrice - item.price }}
                </span>
              </p>
            </td>
            <td class="tc">
              <xtx-numbox
                :cont="item.count"
                @jiaa="jiaa(key)"
                @jiann="jiann(item.count, key)"
              ></xtx-numbox>
            </td>
            <td class="tc">
              <p class="f16 red">&yen;{{ item.count * item.price }}</p>
            </td>
            <td class="tc">
              <p><a href="javascript:;">移入收藏夹</a></p>
              <p>
                <a class="green" href="javascript:;" @click="dellist(key)"
                  >删除</a
                >
              </p>
              <p><a href="javascript:;">找相似</a></p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 操作栏 -->
    <div class="action">
      <div class="batch" style="display: flex">
        <check-box :val.sync="flag" :title="'quan'"></check-box>全选
        <div class="syq">
          <a href="javascript:;" @click="delss">删除商品</a>
          <a href="javascript:;">移入收藏夹</a>
          <a href="javascript:;">清空失效商品</a>
        </div>
      </div>
      <div class="total">
        共{{ this.$store.getters["cart/catenum"] }} 件商品，已选择
        {{ this.$store.getters["cart/xuannum"] }}
        件，商品合计：
        <span class="red">￥{{ this.$store.getters["cart/allprice"] }}</span>
        <button type="primary" class="btn" @click="$router.push('/member/checkout')">
          下单结算
        </button>
      </div>
    </div>
    <!-- 同类商品推荐区域 -->
    <goods-relevant
      :relevantlist="relevantlist"
      :relevant="relevant"
    ></goods-relevant>
  </div>
</template>

<script>
import { cartdel } from "@/utils/api/cartapi";
import { getSame } from "@/utils/api/detail";
import BreadCart from "./BreadCart.vue";
import GoodsRelevant from "@/components/goodsdetail/GoodsRelevant.vue";
import XtxNumbox from "../utils/XtxNumbox.vue";
import CheckBox from "../subcategory/CheckBox.vue";
export default {
  components: {
    BreadCart,
    GoodsRelevant,
    XtxNumbox,
    CheckBox,
  },
  data() {
    return {
      relevantlist: [],
      relevant: "猜你喜欢",
      flag: false,
      list: [],
    };
  },
  mounted() {
    this.xuan1(this.$route.query.id);
    this.getlist();
  },
  //   computed: {
  //     // list() {
  //     //   return this.$store.state.cart.list;
  //     // },
  //   },
  watch: {
    list: {
      handler() {
        let index = this.list.findIndex((item) => {
          return item.selected == false;
        });
        if (index == -1) {
          this.flag = true;
        } else {
          this.flag = false;
        }
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    jia(key) {
      this.$store.commit("cart/jia", key);
    },
    jiann(number, key) {
      if (number > 1) {
        this.$store.commit("cart/jian", key);
      }
    },
    //同类商品
    async xuan1(id) {
      var arr = {
        id: id,
        limit: 16,
      };
      let resa = await getSame(arr);
      // console.log(resa);
      this.relevantlist = resa.result;
    },
    //删除
    dellist(key) {
      this.$confirm({ text: "提示语", title: "您确认从购物车删除该商品吗" })
        .then(async () => {
          if (
            this.$store.state.user.userinfo &&
            this.$store.state.user.userinfo.token
          ) {
            //登录
            let res = await cartdel([this.list[key].skuId]);
            if (res.msg == "操作成功") {
              this.message({ text: "删除成功", type: "success" });
              this.getlist();
            }
          } else {
            this.$store.commit("cart/delCart", key);
          }
        })
        .catch(() => {});
    },
    //商品列表
    async getlist() {
      if (
        this.$store.state.user.userinfo &&
        this.$store.state.user.userinfo.token
      ) {
        await this.$store.dispatch("cart/asynccartlist");
      }
      this.list = this.$store.state.cart.list;
    },
    One1(val) {
      this.flag = val;
      this.$store.commit("cart/quan", this.flag);
    },
    //选中的删除
    delss() {
      this.$store.commit("cart/alldel");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/color.scss";
.btn {
  width: 180px;
  height: 50px;
  font-size: 16px;
  border-color: #27ba9b;
  background: #27ba9b;
  color: #fff;
  border-radius: 5px;
  border: none;
}
.cartqx {
  text-align: center;
}
.tc {
  text-align: center;
  .xtx-numbox {
    margin: 0 auto;
    width: 120px;
  }
}
.red {
  color: $priceColor;
}
.green {
  color: $xtxColor;
}
.f16 {
  font-size: 16px;
}
.goods {
  display: flex;
  align-items: center;
  img {
    width: 100px;
    height: 100px;
  }
  > div {
    width: 280px;
    font-size: 16px;
    padding-left: 10px;
    .attr {
      font-size: 14px;
      color: #999;
    }
  }
}
.action {
  display: flex;
  background: #fff;
  margin-top: 20px;
  height: 80px;
  align-items: center;
  font-size: 16px;
  justify-content: space-between;
  padding: 0 30px;
  .xtx-checkbox {
    color: #999;
  }
  .batch {
    a {
      margin-left: 20px;
    }
  }
  .red {
    font-size: 18px;
    margin-right: 20px;
    font-weight: bold;
  }
}
.tit {
  color: #666;
  font-size: 16px;
  font-weight: normal;
  line-height: 50px;
}
.xtx-cart-page {
  .cart {
    background: #fff;
    color: #666;
    table {
      border-spacing: 0;
      border-collapse: collapse;
      line-height: 24px;
      th,
      td {
        padding: 10px;
        border-bottom: 1px solid #f5f5f5;
        &:first-child {
          text-align: left;
          padding-left: 30px;
          color: #999;
        }
      }
      th {
        font-size: 16px;
        font-weight: normal;
        line-height: 50px;
      }
    }
  }
}
</style>